<template>
    <div class="InboundList-box">
       <!-- 自主活动列表 -->
        <h3 class="mb16">自主活动列表</h3>
        <!-- 搜索栏 -->
        <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
        <!-- 增删改查 -->
        <div class="function-box" v-if="checkPermi(['system:inventory:edit'])">
                <el-button class="addBtn2" @click="activityPassS">下载</el-button>
                <!-- <el-button class="delBtn2" @click="activityRejectS">拒绝</el-button> -->
        </div>
        <!-- 活动列表页面 -->
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="total"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      :initiativeShow='initiativeShow'
      @initiativeView="initiativeView"
      @initiativeReject="initiativeReject"
      @initiativePass="initiativePass"
      @initiativeEdit="initiativeEdit"
      :pagination="inventoryTableData.length>0"
    >
    </forTableCom>
    <!-- 添加或修改用户配置对话框 -->
      <el-dialog :title="title" v-model="open" width="1000px" append-to-body>
         <el-form :model="form" :rules="rules" label-position="top" ref="userRef" label-width="80px">
            <div class="formItembox">
                  <el-form-item class="formItem" label="学生姓名" prop="nickName">
                     <el-input disabled  v-model="form.nickName" placeholder="" />
                  </el-form-item>
                  <el-form-item class="formItem" label="学号" prop="userName">
                     <el-input disabled v-model="form.userName" placeholder="" />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动名称" prop="title">
                     <el-input disabled v-model="form.title" placeholder="" />
                  </el-form-item>
                  <el-form-item class="formItem" label="报名开始时间" prop="signupStart">
                     <el-date-picker
                       disabled
                       class="input"
                         v-model="form.signupStart"
                         type="datetime"
                         placeholder=""
                       />
                  </el-form-item>
                  <el-form-item class="formItem" label="报名截止时间" prop="signupEnd">
                     <el-date-picker
                       class="input"
                       disabled
                         v-model="form.signupEnd"
                         type="datetime"
                         placeholder=""
                       />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动开始时间" prop="activityStart">
                     <el-date-picker
                       class="input"
                       disabled
                         v-model="form.activityStart"
                         type="datetime"
                         placeholder=""
                       />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动结束时间" prop="activityEnd">
                     <el-date-picker
                       class="input"
                       disabled
                         v-model="form.activityEnd"
                         type="datetime"
                         placeholder=""
                       />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动地点" prop="address">
                     <el-input disabled v-model="form.address" placeholder="" />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动范围" prop="activityScopeNameList">
                     <!-- 活动范围 -->
                     <el-input disabled v-model="form.activityScopeNameList" placeholder="" />
                  </el-form-item>
                  <el-form-item class="formItem" label="得分标准" prop="scoreType">
                     <el-select disabled v-model="form.scoreType" placeholder="">
                        <el-option label="参与得分" value="1">参与得分</el-option>
                        <el-option label="指标评分" value="2">指标评分</el-option>
                        <el-option label="区间得分" value="3">区间得分</el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item class="formItem" label="活动类型" prop="activityCategoryId">
                     <el-select disabled v-model="form.activityCategoryId" placeholder="">
                        <el-option
                           v-for="item in activityTypes"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                        ></el-option>
                     </el-select>
                  </el-form-item>
                   <el-form-item class="formItem" label="状态">
                      <el-radio-group disabled v-model="form.isOpen">
                         <el-radio label="0" value="0">开启</el-radio>
                         <el-radio label="1" value="1">关闭</el-radio>
                      </el-radio-group>
                   </el-form-item>          
                  <el-form-item class="formItem" label="活动内容">
                     <el-input disabled v-model="form.content" type="textarea" placeholder=""></el-input>
                  </el-form-item>
                  <el-form-item class="formItem" label="证明资料" prop="attachment">
                     <el-input disabled v-model="form.attachment" placeholder="" />
                     <span style="margin-left: 5px;cursor: pointer;color: blue;" @click="downZiliao(form.attachment)">下载</span>
                  </el-form-item>
                  <el-form-item v-show="submitType===-1 || submitType===2" class="formItem" label="加分/减分" prop="creditValue">
                     <el-input v-model="form.creditValue" placeholder="请输入分值对学生分数进行更改" />
                  </el-form-item>
                  <el-form-item style="visibility: hidden;;" class="formItem" label="加分/减分" prop="title">
                      <p></p>
                  </el-form-item>
                  <el-form-item class="formItem" :label="submitType===-1 || submitType===2? '更改原因' : '拒绝原因'">
                     <el-input  v-model="form.remark" type="textarea" :placeholder="submitType===-1 || submitType===2? '请输入加分/减分原因' : '请输入拒绝原因'"></el-input>
                  </el-form-item>
                  <el-form-item class="formItem" label="活动封面" prop="attachment">
                     <div class="file-list">
                      <div class="file-item">
                        <img class="file-img" :src="urlShow" alt="" @click="openPhoto">
                      </div>
                     </div>
                  </el-form-item>
            </div>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="cancel">取消</el-button> 
               <el-button v-show="submitType===-1" type="primary" @click="submitForm">通过</el-button>
               <el-button v-show="submitType===1" type="danger" @click="submitForm">拒绝</el-button>
               <el-button v-show="submitType===2" type="primary" @click="submitForm">提交</el-button>
            </div>
         </template>
      </el-dialog>

    <!-- 图片线上地址预览 -->
    <div v-if="showPreview" class="preview-modal" @click.self="closePreview">
      <div class="preview-content">
        <img :src="currentImage" class="preview-image" />
        <button class="close-button" @click="closePreview">
          <svg viewBox="0 0 24 24" width="24" height="24">
            <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
          </svg>
        </button>
      </div>
    </div>

    </div>
</template>

<script setup>
import { ref, reactive, toRefs,computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import serchForm from '@/components/inventory/serchForm.vue'
import { checkPermi } from '@/utils/permission.js'
import forTableCom from '@/components/forTableCom/index.vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import {delUser,addUser} from '@/api/system/upload.js'
import {quickCodeChildrenApi} from '@/api/system/dict/type.js'
import { getToken } from "@/utils/auth";
import FileUploads from './components/uploads2.vue'
import VuePdfEmbed from 'vue-pdf-embed';
import * as XLSX from 'xlsx';
import { renderAsync } from 'docx-preview';
import {activityLists,activityListAddApi,activityDetail,activityPutApi,activityScoring} from '@/api/activityClassify/activityList.js'
import {getdeptApi} from '@/api/system/notice.js'
import {listUser} from '@/api/activityClassify/activityClassifyType.js'
import {activityAutoPass,activityAutoPutApi} from '@/api/activityClassify/autonomously.js'
import dayjs from 'dayjs';

const router = useRouter();
const route = useRoute();
const data = reactive({});
const { proxy } = getCurrentInstance();
let nodekey = ref(Math.random())

const title = ref("");
const open = ref(false);
const form = ref({
     title:'', //活动名称
     signupStart:'', //报名开始时间
     signupEnd:'', //报名截止时间
     activityStart:'', //活动开始时间
     activityEnd:'', //活动结束时间
     address:'', //活动地点
     activityScopeNameList:'', //活动范围
     scoreType:'', //得分标准
     activityCategoryId:'', //活动类型
     coverImageUrl:'',      //活动封面
     attachment:'',   //证明资料
     content:'',     //活动内容
     type:2,       //区分教师和学生
     isOpen:'0',     //状态
     nickName:'',    //学生姓名
     userName:'',    //学号
     remark:'',      //更改原因
     creditValue:'', //赋分
  })
const rules = ref({
    creditValue: [{ required: true, message: "请输入分数", trigger: "blur" }],
  })

// 表单
let inventoryForm = ref({
  activityCategoryId:'',//活动类型
  activityTime: '', // 活动时间
  title: '', // 活动名称
  id: '', // 活动编号,
  nickName:'', //学生姓名
  userName:'', //学号
})
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'activityTime',
    label: '活动时间',
    type: 'datetimerange',
  },
  {
    name: 'id',
    label: '活动编号',
  },
  {
    name: 'title',
    label: '活动名称',
  },
  {
    name: 'activityCategoryId',
    label: '活动类型',
    type:'select',
    client: [],
  },
  {
    name: 'nickName',
    label: '学生姓名',
  },
  {
    name: 'userName',
    label: '学号',
  },
])
// 查找
const onSearch = (v) => {
  console.log(v,'查看入库页面时间参数')
  // 每次查询后回到页1
  pageNum.value = 1
  v.startDate = v.activityTime[0]
  v.endDate = v.activityTime[1]
  activityListsFn(v)
}

// 显示操作栏
const initiativeShow = ref(true)
let idActive = 'id'
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let total = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])
const piliangIds = ref('')
let ids = []
// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v.map(item => item.id);        //过滤id
    ids = Array.from(multipleSelection.value)              //批量通过/拒绝用的
    piliangIds.value = multipleSelection.value.join(',')   //批量删除用的
}
// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  let params = inventoryForm.value
  activityListsFn(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v)
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v)
}
// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'id',
    label: '活动编号',
    sortable: true,
    minwidth: 110,
  },
  {
    prop: 'coverImageUrl',
    label: '活动封面',
    coverImageUrlShow:true,
    minwidth: 80,
  },
  {
    prop: 'title',
    label: '活动名称',
    minwidth: 180,
  },
  {
    prop: 'activityTime',
    label: '活动时间',
    activityTimeShow:true,
    minwidth: 270,
  },
  {
    prop: 'activityCategoryName',
    label: '活动类型',
    minwidth: 180,
  },
  {
    prop: 'nickName',
    label: '学生姓名',
  },
  {
    prop: 'userName',
    label: '学号',
  },
  {
    prop: 'activityCategoryName',
    label: '证明资料',
  },
  {
    prop: 'activityScopeNameList',
    label: '活动范围',
    activityScopeNameListShow:true,
    minwidth: 180,
  },
  {
    prop: 'signup',
    label: '报名时间',
    sortable: true,
    signupActivityShow:true,
    minwidth: 270,
  },
  {
    prop: 'scoreType',
    label: '得分标准',
    scoreTypeActivityShow:true
  },
  {
    prop: 'status',
    label: '状态',
    statusActivityShow2:true
  },
  {
    prop: 'activityParticipationList',
    label: '已报名人数',
    activityPersonListShow:true
  },
])
// 表格数据内容
let inventoryTableData = ref([])

const initiativeView = (val)=>{ //查看按钮
    let {i , v} = val
    router.push({path:`/autonomouslyDetail/${v.id}`})
}
const initiativeReject = (val)=>{ //拒绝按钮
    let {i , v} = val
    submitType.value = 1
    open.value = true
    title.value = '自主活动申请详情'
    form.value.creditValue = ''
    form.value.remark = ''
    activityDetail(v.id).then(res=>{
        if(res.code===200){
             form.value.title = res.data.title
             form.value.signupStart = res.data.signupStart
             form.value.signupEnd = res.data.signupEnd
             form.value.activityStart = res.data.activityStart
             form.value.activityEnd = res.data.activityEnd
             form.value.address = res.data.address
             form.value.scoreType = String(res.data.scoreType)
             form.value.activityCategoryId = res.data.activityCategoryId
             form.value.content = res.data.content
            //  form.value.activityScopeList = res.data.activityScopeNameList
            if(res.data.activityScopeNameList){
                 form.value.activityScopeNameList = res.data.activityScopeNameList.join(' / ')
            }
             nodekey.value = Math.random()
             urlShow.value = res.data.coverImageUrl
             form.value.isOpen = String(res.data.isOpen)
             form.value.attachment = res.data.attachment
             
             backupId.value = res.data.id
             backupUserId.value = res.data.userId
             form.value.nickName = res.data.nickName
             form.value.userName = res.data.userName
        }
    })
}

const submitType = ref(-1)
const backupId = ref(-1)
const backupUserId = ref(-1)
const initiativePass = async(val)=>{ //通过按钮
    let {i , v} = val
    submitType.value = -1
    open.value = true
    title.value = '自主活动申请详情'
    form.value.creditValue = ''
    form.value.remark = ''
    activityDetail(v.id).then(res=>{
        console.log(res,'打印详情数据');
        if(res.code===200){
             form.value.title = res.data.title
             form.value.signupStart = res.data.signupStart
             form.value.signupEnd = res.data.signupEnd
             form.value.activityStart = res.data.activityStart
             form.value.activityEnd = res.data.activityEnd
             form.value.address = res.data.address
             form.value.scoreType = String(res.data.scoreType)
             form.value.activityCategoryId = res.data.activityCategoryId
             form.value.content = res.data.content
            //  form.value.activityScopeList = res.data.activityScopeNameList
             if(res.data.activityScopeNameList){
                 form.value.activityScopeNameList = res.data.activityScopeNameList.join(' / ')
            }
             nodekey.value = Math.random()
             urlShow.value = res.data.coverImageUrl
             form.value.isOpen = String(res.data.isOpen)
             form.value.attachment = res.data.attachment

             
             backupId.value = res.data.id
             backupUserId.value = res.data.userId
             form.value.nickName = res.data.nickName
             form.value.userName = res.data.userName
        }
    })
}
let urlShow = ref('')
const initiativeViewId = ref('')
const initiativeEdit = (val)=>{ //编辑按钮
    let {i , v} = val
    submitType.value = 2
    editId.value = v.id
    open.value = true
    title.value = '自主活动申请详情'
    form.value.creditValue = ''
    form.value.remark = ''
    activityDetail(v.id).then(res=>{
        console.log(res,'打印详情数据');
        if(res.code===200){
             form.value.title = res.data.title
             form.value.signupStart = res.data.signupStart
             form.value.signupEnd = res.data.signupEnd
             form.value.activityStart = res.data.activityStart
             form.value.activityEnd = res.data.activityEnd
             form.value.address = res.data.address
             form.value.scoreType = String(res.data.scoreType)
             form.value.activityCategoryId = res.data.activityCategoryId
             form.value.content = res.data.content
            //  form.value.activityScopeList = res.data.activityScopeNameList
             if(res.data.activityScopeNameList){
                 form.value.activityScopeNameList = res.data.activityScopeNameList.join(' / ')
            }
             nodekey.value = Math.random()
             urlShow.value = res.data.coverImageUrl
             form.value.isOpen = String(res.data.isOpen)
             form.value.attachment = res.data.attachment
             
             backupId.value = res.data.id
             backupUserId.value = res.data.userId
             form.value.nickName = res.data.nickName
             form.value.userName = res.data.userName
             initiativeViewId.value = res.data.studentCreditRecords.id
        }
    })
}

const editId = ref(-1)
const activityPassS = ()=>{ //批量通过
    if(ids.length===0){
      ElMessage({
                 message: '请先选择要下载的数据',
                 type: 'error',
               })
       return false
  }
    open.value = true
    title.value = '自主活动申请详情'
    editId.value=-1
    nodekey.value = Math.random()

}
const downZiliao = (fileUrl)=>{  //下载资料
   if(!fileUrl){
       ElMessage({
                 message: '没有数据无法下载',
                 type: 'error',
               })
               return false
   }
     ElMessageBox.confirm(
    '确定要下载该资料吗?',
    '下载',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
         try {
        // 获取文件名（如果未提供则从URL中提取）
        var index = fileUrl.lastIndexOf('.')
        var name = fileUrl.slice(index)

        var index2 = fileUrl.lastIndexOf('/')
        var index3 = fileUrl.lastIndexOf('_')
        var name2 = fileUrl.slice(index2 + 1, index3)

        let filename = name2 + '' + name || '';  //获取文件名
        // if (!filename) {
        //     const urlParts = fileUrl.split('/');
        //     filename = urlParts[urlParts.length - 1].split('?')[0];
        // }

        // 使用fetch API获取文件
        const response = await fetch(fileUrl, {
            mode: 'cors', // 尝试跨域请求
            headers: new Headers({
                'Origin': window.location.origin,
            }),
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        // 获取文件blob
        const blob = await response.blob();
        
        // 创建对象URL
        const blobUrl = window.URL.createObjectURL(blob);
        
        // 创建隐藏的下载链接
        const link = document.createElement('a');
        link.href = blobUrl;
        link.download = filename;
        link.style.display = 'none';
        document.body.appendChild(link);
        
        // 触发点击
        link.click();
        
        // 清理
        setTimeout(() => {
            document.body.removeChild(link);
            window.URL.revokeObjectURL(blobUrl);
        }, 100);
    } catch (error) {
        console.error('下载失败:', error);
        
        // 如果fetch方式失败，尝试直接使用原始URL（适用于同源或服务器允许直接下载的情况）
        const link = document.createElement('a');
        link.href = fileUrl;
        link.download = filename || 'download';
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
const activityRejectS = ()=>{  //批量拒绝
    if(ids.length===0){
      ElMessage({
                 message: '请先选择要拒绝的数据',
                 type: 'error',
               })
       return false
  }
   open.value = true
   title.value = '自主活动申请详情'
}
/** 通过按钮提交 */
function submitForm() {
  proxy.$refs["userRef"].validate(valid => {
    if (valid) {
      if(submitType.value === -1){
          let obj = {
        id:backupId.value,
        status:1,
        creditValue:form.value.creditValue,
        remark:form.value.remark,
    }
          activityAutoPass(obj).then(res=>{
         if(res.code===200){
             ElMessage({
                 message: '通过成功',
                 type: 'success',
               })
               open.value = false
               activityListsFn()
         }
    })
      }else if(submitType.value === 1){
           let obj = {
        id:backupId.value,
        status:2,
        remark:form.value.remark,
    }
          activityAutoPass(obj).then(res=>{
         if(res.code===200){
             ElMessage({
                 message: '拒绝成功',
                 type: 'success',
               })
               open.value = false
               activityListsFn()
         }
    })
      }else if(submitType.value === 2){
           let obj = {
        id:initiativeViewId.value,
        creditValue:form.value.creditValue,
        remark:form.value.remark
        }
        activityAutoPutApi(obj).then(res=>{
         if(res.code===200){
             ElMessage({
                 message: '修改成功',
                 type: 'success',
               })
               open.value = false
               activityListsFn()
         }
    })
      }
    }
  });
};
const cancel = ()=>{  //取消
     open.value = false
}
// 查询自主活动列表数据
const activityListsFn = async (data = '') => {
  let page = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    type:2
  }
  let params = JSON.parse(JSON.stringify(Object.assign(page,data)))
  delete params.activityTime
  let res = await activityLists(params)
  let { code, rows } = res
  if (code == 200) {
    total.value = res.total
    inventoryTableData.value = rows
    console.log(rows,'打印自主活动列表数据');

    // 使用 map 转换 attachment，同时保留其他字段
    // inventoryTableData.value = rows.map(item => ({
    //   ...item, // 保留所有原有字段
    //   attachment: JSON.parse(item.attachment)[0] // 覆盖 attachment 为解析后的字符串
    // }));
  }
}
let options = ref([])
const quickCodeChildrenApiFn =()=>{  //通过快码获得资料类型
    quickCodeChildrenApi({parentCode:30000}).then(res=>{
        console.log(res,'查询子集快码');
        if(res.code===200){
           options.value = res.rows
        }
    })
}

// 获取活动范围下拉信息
const genderOptions = ref([])
const getdeptApiFn = async () => {
  let page = {
    pageNum: 1,
    pageSize: -1,
  }
  let {code, data} = await getdeptApi(page)
  if (code === 200) {
    genderOptions.value = data
  }
}
// 获取活动类型下拉信息
const activityTypes = ref([])
const listUserFn = async () => {
  let page = {
    pageNum: 1,
    pageSize: -1,
  }
  let {code, rows} = await listUser(page)
  if (code === 200) {
    activityTypes.value = rows
    let rowList = []
  rows.forEach((v) => {
    rowList.push({
      value: v.id,
      label: v.name,
    })
    inventoryFormLabel.value[3].client.push(
      {
        value: v.id,
        label: v.name,
      }
    )
  })
  activityTypes.value = rowList
  }
}

//预览功能
const showPreview = ref(false);
const currentImage = ref('');

//打开预览
const openPhoto = ()=>{
         currentImage.value = urlShow.value;
         showPreview.value = true;
         document.body.style.overflow = 'hidden'; // 防止背景滚动
}
// 关闭预览
const closePreview = () => {
  showPreview.value = false;
  document.body.style.overflow = '';
};
// 点击ESC键关闭预览
const handleKeyDown = (e) => {
  if (e.key === 'Escape' && showPreview.value) {
    closePreview();
  }
};
// 添加键盘事件监听
window.addEventListener('keydown', handleKeyDown);
onMounted(()=>{
    Promise.all([activityListsFn(),quickCodeChildrenApiFn(),getdeptApiFn(),listUserFn()])
})

</script>

<style lang='scss' scoped>
.InboundList-box {
    padding: 16px;
    .function-box {
    display: flex;
    align-items: center;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center; /* 水平居中 */
}
.formItembox {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // justify-content: center;
      box-sizing: border-box;

      .formItem {
        width: 30%;
        // margin-right: 30px;
      }
      .formItem:nth-child(13) {
        width: 100%;
        margin-right:0;
      }
      .formItem:nth-child(17) {
        width: 100%;
        margin-right:0;
      }
      .formItem:nth-child(3) {
        margin-right:0;
      }
      .formItem:last-child{
        margin-right:0;
        width: 100%;
        .file-list{
           width: 100%;
           border: 1px solid #ccc;
           display: flex;
           justify-content: center;
           padding: 10px 0;
           .file-item{
            width: 200px;
            height: 200px;
              .file-img{
                 width: 100%;
                 height: 100%;
              }
           }
        }
      }
    }
:deep(.el-select .el-input__wrapper) {  //下拉框
  width: 240px;
}
:deep(.el-date-editor){  //日期选择器
   width: 240px;
}
.formItem :deep(.el-input) {  //input输入框
  width: 240px;
}
:deep(.el-textarea__inner){   //文本域
    height: 80px;
}


.excel-table{
   border: 1px solid rgb(0, 0, 0);
        border-image: none;
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        background-color: rgb(255, 255, 255);
}
:deep(.el-form-item:nth-child(4) .el-form-item__label) {
  margin-left: 0;
}

//图片预览样式
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.preview-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.preview-image {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}

.close-button {
  position: absolute;
  top: -40px;
  right: -40px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 24px;
  padding: 10px;
  transition: transform 0.2s;
}

.close-button:hover {
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .close-button {
    top: -50px;
    right: 10px;
  }
}
//docx预览
.docx-preview {
  overflow: auto;
  border: 1px solid #eee;
}
:deep(.docx-wrapper) {
  padding: 0;
  background: #fff;
}

//视频预览
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
}

.video-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .video-thumbnail {
    max-width: 100%;
  }
}
.uploadTitle{
  font-weight: 600;
  margin-bottom: 12px;
}
</style>
